<template>
    <div>
        <div class="form-window">
            <div class="form-window-line"></div>
            <div class="form-window-txt">投保人信息</div>
            <div class="form-window-btn">
                <el-button :disabled="edit" size="mini" @click="history()" type="text">历史信息
                </el-button>
            </div>
        </div>
        <div class="form-form">
            <el-form label-position="left" label-width="140px" size="small">
                <el-form-item label="营业执照" v-if="showTestFeatures && insure.type == 1">
                    <div class="form-uplopad-box">
                        <upload :img_url="insure.license" file_name="insure/license" @change="upInsure($event, -1)"
                            @changeKey="upLicenseKey"></upload>

                        <div class="form-uplopad-box-txt">示例</div>
                        <img src="@/assets/img/yyzz.png" class="form-uplopad-box-img" />
                        <div class="form-uplopad-box-no" v-if="edit"></div>
                    </div>
                </el-form-item>
                <el-form-item label="投保人类型">
                    <el-button :disabled="edit" size="small" @click="clickTabs(index)"
                        :class="item.isActive ? 'com-btn' : ''" v-for="(item, index) in tabs" :key="'djf' + index">{{
                            item.name }}
                    </el-button>
                </el-form-item>
                <el-form-item label="投保人">
                    <div>
                        <el-input :disabled="edit" @blur="qiyeName()" v-model="insure.name" placeholder="请输入"
                            class="form-input"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="法人" v-if="type == 1 && bx_id != 15 && this.showTestFeatures">
                    <div>
                        <el-input :disabled="edit" v-model="insure.contact" placeholder="请输入"
                            class="form-input"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="证件类型">
                    <div>
                        <el-input v-model="cardType" :disabled="true" class="form-input"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="证件号码">
                    <div>
                        <el-input @blur="qiyeNo()" :disabled="edit" v-model="insure.client" placeholder="请输入"
                            class="form-input"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="手机号码" v-if="bx_id != 15 && this.showTestFeatures">
                    <div>
                        <el-input :disabled="edit" v-model="insure.contact_mobile" placeholder="请输入"
                            class="form-input"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="所属省市区"  v-if="type == 1">
                    <div>
                        <el-cascader :disabled="edit" :options="optionsHyAddress" @change="changeAddress"
                            :props="propsHyAddress" class="form-input" :placeholder="text ? text : '请选择'"></el-cascader>
                    </div>
                </el-form-item>
                <el-form-item label="详细地址" v-if="bx_id != 15 && this.showTestFeatures">
                    <div>
                        <el-input :disabled="edit" v-model="insure.address" placeholder="请输入"
                            class="form-input"></el-input>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="邮箱">
                    <div>
                        <el-input :disabled="edit" v-model="insure.email" placeholder="请输入"
                            class="form-input"></el-input>
                    </div>
                </el-form-item> -->
            </el-form>
            <div class="form-btn-box">
                <el-button size="small" @click="updateInfoItem(7)">修改</el-button>
                <el-button size="small" class="com-btn" @click="saveStorage(7)">保存
                </el-button>
            </div>
        </div>
        <el-dialog :visible.sync="his_model" title="历史信息" width="600px" :close-on-click-modal="false"
            :destroy-on-close="true">
            <el-form ref="form" label-width="80px" :inline="true">
                <el-form-item label="企业名称">
                    <el-input v-model="clientName" placeholder="请输入企业名称查询" size="mini"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="com-btn" size="mini" @click="getHistory()">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table size="mini" border :data="his_list">
                <el-table-column type="index" width="60px"></el-table-column>
                <el-table-column label="企业名称" prop="insure.name"></el-table-column>
                <el-table-column label="统一信用编码" prop="insure.client"></el-table-column>
                <el-table-column label="操作" width="100px">
                    <template slot-scope="item">
                        <el-button size="mini" type="text" @click="seletcHis(item.row)">选择
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import upload from "@/components/upload/sm-upload.vue";
export default {
    components: {
        upload
    },
    props: {
        edit: { type: Boolean, default: false },
        insure: {},
        types: {},
        optionsHyAddress: {},
        propsHyAddress: {},
    },
    data() {
        return {
            his_model: false,
            his_list: [],
            clientName: "",
            tabs: [
                {
                    name: "企业",
                    isActive: false,
                },
                {
                    name: "个人",
                    isActive: false,
                }
            ],
            bx_id: ''


        }
    },
    computed: {
        type: function () {
            return this.insure.type
        },
        text: function () {
            if (this.insure.province) {
                return this.insure.province + '/' + this.insure.city + '/' + this.insure.area
            }
            return ''
        },
        cardType: function () {
            if (this.insure.type == 1) {
                return '统一信用代码'
            } else {
                return '身份证'
            }
        }
    },
    watch: {
        type: {
            handler(newVal) {

                if (newVal == 1) {
                    this.tabs[0].isActive = true
                    this.tabs[1].isActive = false
                } else {
                    this.tabs[0].isActive = false
                    this.tabs[1].isActive = true
                }
                //   console.log('newVla' + newVal + 'oldVal' + oldVal)
            },
            immediate: true
        }

    },
    mounted() {
        this.bx_id = this.$route.params.id;

    },
    methods: {
        qiyeNo(){
            this.$emit('qiyeNo')
        },
        qiyeName(){
            this.$emit('qiyeName')
        },
        upLicenseKey(e) {
            if (this.showTestFeatures) {
                this.$emit('upLicenseKey', e)
            }

        },
        upInsure(e, index) {
            if (this.showTestFeatures) {
                this.$emit('upInsure', e, index,'投保');
            }

        },
        //选中信息
        seletcHis(item) {
            console.log(item)
            for (let i in this.insure) {
                if (item.insure[i]) {
                    this.insure[i] = item.insure[i];
                }
            }
            this.text = item.insure.address;
            this.his_model = false;
            console.log(this.insure);
            
            this.$emit('seletcHis', item)
        },
        //历史信息
        history() {
            this.ajaxs("index/getClient", {
                data: { name: this.clientName, type: this.types },
                success: (res) => {
                    this.his_list = res.msg;
                    console.log(this.his_list);
                    this.his_model = true;
                    
                },
            });
        },
        //查询历史信息
        getHistory() {
            this.ajaxs("index/getClient", {
                data: { name: this.clientName, type: this.types },
                success: (res) => {
                    this.his_list = res.msg;
                },
            });
        },

        //保存
        saveStorage(index) {
            this.$emit('saveStorage', index)
        },
        //修改
        updateInfoItem(index) {
            this.$emit('updateInfoItem', index)
        },
        clickTabs(index) {
            for (let i in this.insure) {
                this.insure[i] = ''
            }
            this.tabs.forEach((item, i) => {
                if (i == index) {
                    item.isActive = true;
                } else {
                    item.isActive = false;
                }
            })

            if (index == 0) {
                this.insure.type = 1;

            } else {
                this.insure.type = 2;

            }
            this.$emit('insureClickTabs')
        },
        changeAddress(e) {
            this.insure.province = e[0];
            this.insure.city = e[1]
            this.insure.area = e[2]
            this.text = e[0] + "/" + e[1] + "/" + e[2];
            // this.$emit('update:insure.province', e[0])
            console.log(e);
        }

    }
}
</script>
<style scoped>
@import "../../../assets/css/index/form.css";
</style>